<template>
	<div class="yh_content">
		<div class="tback">
			<el-button type="primary" class="bac6b7" @click="back">返回列表</el-button>
		</div>
		<div class="contents">
			<div style="display:flex" class="thead">
				<img class="touxiang" :src="ruleForm.headimg">
				<el-button type="primary" class="bac6b7" plain style="margin-left:20px"
					@click="dialogVisible = true">本地上传</el-button>
			</div>
			<div class="small_title">客户档案</div>
			<div class="forms">
				<div class="forms_item">
					<div class="left_title"><span style="color:red;margin-right:2px">*</span>昵称</div>
					<div><el-input v-model="ruleForm.nickname" size="small" placeholder="请填写姓名" /> </div>
				</div>
        <div class="forms_item">
          <div class="left_title"><span style="color:red;margin-right:2px">*</span>姓名</div>
          <div><el-input v-model="ruleForm.realname" size="small" placeholder="请填写姓名" /> </div>
        </div>
				<div class="forms_item">
					<div class="left_title"><span style="color:red;margin-right:2px">*</span>姓别</div>
					<div>
						<el-radio-group v-model="ruleForm.sex">
							<el-radio :label="1">男</el-radio>
							<el-radio :label="2">女</el-radio>
						</el-radio-group>
					</div>
				</div>
				<div class="forms_item">
					<div class="left_title"><span style="color:red;margin-right:2px">*</span>手机</div>
					<div class="dis disAl">
						<el-input v-model="ruleForm.tel" size="small" placeholder="请填写手机号码" />
						<div class="que coFFF foSi12 cuPo" @click.stop="tongbuClick" style="width: 85px;">同步</div>
					</div>
				</div>
				<div class="forms_item">
					<div class="left_title">生日</div>
					<div style="display:flex;align-items: center;">
						<el-radio-group v-model="ruleForm.is_lunar">
							<el-radio :label="1">阴历</el-radio>
							<el-radio :label="2">阳历</el-radio>
						</el-radio-group>
						<el-date-picker v-model="ruleForm.birthday" style="width: 140px; margin-left: 5px" size="small"
							type="date" placeholder="请选择" @change="birthdayChange"
							:picker-options="{disabledDate:dateOptions}" />
						<div v-if="age" style="margin-left:5px">{{age}}岁</div>
					</div>
				</div>
				<div class="forms_item">
					<div class="left_title">身高(cm)</div>
					<div><el-input v-model="ruleForm.height" size="small" placeholder="请输入身高" /> </div>
				</div>
<!--				<div class="forms_item">-->
					<!-- <div class="left_title">身高</div>
					<div><el-input v-model="form.name" size="small" placeholder="请输入身高"></el-input> </div> -->
<!--				</div>-->
				<div class="forms_item">
					<div class="left_title">会籍顾问</div>
					<div>
						<el-select v-model="ruleForm.consultant" placeholder="请选择" size="small">
							<el-option v-for="(item,index) in search.membership" :key="index" :label="item.name"
								:value="item.id" />
						</el-select>
					</div>
				</div>
				<div class="forms_item">
					<div class="left_title">渠道来源</div>
					<div>
						<el-select v-model="ruleForm.channel" placeholder="请选择" size="small">
							<el-option v-for="(item,index) in search.channelsource" :key="index" :label="item.name"
								:value="item.id" />
						</el-select>
					</div>
				</div>
				<div class="forms_item">
					<div class="left_title">证件类型</div>
					<div>
						<el-select v-model="ruleForm.usercard_type" placeholder="请选择" size="small">
							<el-option v-for="item in usercardList" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
					</div>
				</div>
				<div class="forms_item">
					<div class="left_title">证件号码</div>
					<div><el-input v-model="ruleForm.usercard" class="inp1" size="small" placeholder="请输入证件号码" /> </div>
				</div>
				<div class="forms_item">
					<div class="left_title">职业</div>
					<div><el-input v-model="ruleForm.career" size="small" placeholder="请输入职业" /> </div>
				</div>
				<div class="forms_item">
					<div class="left_title">入会时间</div>
					<div style="display:flex;align-items: center;">
						<el-date-picker v-model="ruleForm.join_time" class="inp2" style="margin-left: 5px" size="small"
							type="date" placeholder="请选择" :picker-options="{disabledDate:dateOptions}" />

					</div>
				</div>
				<div class="forms_item">
					<div class="left_title">学历</div>
					<div>
						<el-select v-model="ruleForm.education" placeholder="请选择" size="small">
							<el-option v-for="item in educationList" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
					</div>
				</div>
				<div class="forms_item">
					<div class="left_title">所在地区</div>
					<div>
						<el-cascader v-model="province" class="inp1" :options="cascaderList" :props="optionProps"
							@change="handleChange" />
					</div>
				</div>
				<div class="forms_item">
					<div class="left_title">详细地址</div>
					<div><el-input v-model="ruleForm.address" class="inp" size="small" placeholder="请输入详细地址" /> </div>
				</div>
				<div class="forms_item">
					<div class="left_title">小区名称</div>
					<div><el-input v-model="ruleForm.residential" class="inp" size="small" placeholder="请输入小区名称" />
					</div>
				</div>
			</div>
			<div class="small_title">更多资料</div>
			<div class="forms">
				<div class="forms_item">
					<div class="left_title">职业类型</div>
					<div><el-input v-model="ruleForm.occupation_type" class="inp" size="small" placeholder="请输入职业类型" />
					</div>
				</div>
				<div class="forms_item">
					<div class="left_title">行为动态</div>
					<div><el-input v-model="ruleForm.behavioral" class="inp" size="small" placeholder="请输入行为动态" />
					</div>
				</div>
				<div class="forms_item">
					<div class="left_title">婚姻情况</div>
					<div>
						<el-select v-model="ruleForm.marriage" placeholder="请选择" size="small">
							<el-option v-for="(item,index) in marriageList" :key="index" :label="item.label"
								:value="item.value" />
						</el-select>
					</div>
				</div>
				<div class="forms_item">
					<div class="left_title">孕产情况</div>
					<div><el-input v-model="ruleForm.pregnancy" class="inp" size="small" placeholder="请输入孕产情况" /> </div>
				</div>
				<div class="forms_item">
					<div class="left_title">爱好</div>
					<div><el-input v-model="ruleForm.hobby" class="inp" size="small" placeholder="请输入爱好" /> </div>
				</div>
				<div class="forms_item"></div>
				<div class="forms_item" style="width:100%;justify-content: left;padding:10px 10px 10px 10px">
					<div class="left_title">备注</div>
					<div><el-input v-model="ruleForm.notes" type="textarea" style="min-width:735px;margin-left:20px"
							maxlength="100000" :rows="5" placeholder="请输入爱好" /> </div>
				</div>
			</div>
			<div class="buttom_btns">
				<div class="save">
					<el-button type="success" style="background: #6b7cdd;border-color: #6b7cdd;"
						@click.stop="baocun">保存会员</el-button>
				</div>
				<div class="nosave">
					<el-button type="info" @click="back">取消</el-button>
				</div>
			</div>
		</div>

		<div v-if="dialogVisible" class="zhezhaoN dis disAl disJuC wh100">
			<div class="poRel borRad10 bacFFF" style="width: 650px;">
				<div class="poRel" style="padding: 30px;">
					<svg-icon icon-class="guanbi" class="mar0 cuPo poAbs" @click.stop="dialogVisible = false"
						style="color: #ACACAC;width: 24px;height: 24px;top: 5px;right: 5px;" />
					<div class="wid100 poRel" style="height: 350px;overflow: hidden;">
						<div class="avatar-tips">操作提示：鼠标滚轮缩放大小，拖动选区进行区域选择</div>
						<vue-cropper class="wh100" ref="cropper" :img="option.img" :canMove="false" :autoCropWidth="280"
							:autoCropHeight="280" :outputSize="option.size" :outputType="option.outputType"
							:autoCrop="true" :fixed="true" :fixedNumber="[280,280]" :original="false" :centerBox="true"
							:infoTrue="true" fillColor="#ffffff" mode="contain"></vue-cropper>
					</div>
					<div class="wid100 dis disAl disJuC foSi14 coFFF" style="padding: 20px 0;">
						<el-upload action="#" :http-request="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
							<div class="mar-right20 que cuPo bac759">上传新图</div>
						</el-upload>

						<div class="mar-right20 que cuPo bac6b7" @click.stop="jietu">确认</div>
						<div class="que cuPo" style="background: #616b74;" @click.stop="dialogVisible = false">取消</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getAddEdit,
		getConsultant,
		getChannel,
		MemberDetails,
		getTelFindmember
	} from '@/api/member'
	import {
		VueCropper
	} from 'vue-cropper'
	import cascaderJSON from '@/api/cascaderList.json'
	import {
		uploadimg
	} from '@/api/utils'

	export default {
		name: 'editmember',
		components: {
			VueCropper
		},
		filters: {
			statusFilter(status) {
				const statusMap = {
					published: 'success',
					draft: 'info',
					deleted: 'danger'
				}
				return statusMap[status]
			}
		},
		data() {
			return {
				cascaderList: cascaderJSON,
				optionProps: {
					value: "value",
					label: "value",
					children: "children"
				},
				list: null,
				total: 0,
				listLoading: false,
				search: {
					membership: [],
					channelsource: []
				},
				marriageList: [{
					value: 1,
					label: '未婚'
				}, {
					value: 2,
					label: '已婚'
				}],
				educationList: [{
						value: 1,
						label: '高中'
					}, {
						value: 2,
						label: '专科'
					},
					{
						value: 3,
						label: '本科'
					}, {
						value: 4,
						label: '硕士'
					}, {
						value: 5,
						label: '博士及以上'
					}
				],
				usercardList: [{
					value: 1,
					label: '身份证'
				}, {
					value: 2,
					label: '护照'
				}, {
					value: 3,
					label: '港澳通行证'
				}],
				channelList: [{
					value: 1,
					label: '活动报名'
				}],
				ruleForm: {
					nickname: null,
					realname: null,
					sex: 1,
					tel: null,
					is_lunar: 1,
					height: null,
					consultant: null,
					channel: null,
					usercard: null,
					usercard_type: null,
					career: null,
					join_time: null,
					education: null,
					province: null,
					city: null,
					area: null,
					address: null,
					residential: null,
					occupation_type: null,
					behavioral: null,
					marriage: null,
					pregnancy: null,
					hobby: null,
					notes: null,
					birthday: null,
					id: null,
					// 裁剪过后的图片
					headimg: 'https://www.jianyigongxiang.com/public/membercard/icons.png',
				},
				province: [],
				options: [],
				listQuery: {
					page: 1,
					limit: 20
				},
				// 图片裁剪
				dialogVisible: false,
				// 裁剪配置
				option: {
					img: 'https://www.jianyigongxiang.com/public/membercard/icons.png', // 裁剪图片的地址
					info: true, // 裁剪框的大小信息
					outputSize: 0.8, // 裁剪生成图片的质量
					outputType: 'jpeg', // 裁剪生成图片的格式
					canScale: true, // 图片是否允许滚轮缩放
					autoCrop: true, // 是否默认生成截图框
					autoCropWidth: 200, // 默认生成截图框宽度
					autoCropHeight: 200, // 默认生成截图框高度
					fixedBox: false, // 固定截图框大小不允许改变
					fixed: false, // 是否开启截图框宽高固定比例
					fixedNumber: [1, 1], // 截图框的宽高比例
					full: true, // 是否输出原图比例的截图
					canMoveBox: true, // 截图框能否拖动
					original: false, // 上传图片按照原始比例渲染
					centerBox: true, // 截图框是否被限制在图片里面
					infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
				},
				// 防止重复提交
				loading: false,
				age: null,
				// 选择今天及今天以后的日期
				dateOptions(time) {
					return time.getTime() >= Date.now() - 8.64e6
				},
			}
		},
		created() {
			var query = this.$route.query
			this.id = query.id
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: [{
					name: '编辑会员',
					url: '/member/editmember',
					pd: true
				}]
			})
			getConsultant().then(response => {
				const {
					data
				} = response
				this.search.membership = data
			});
			getChannel().then(response => {
				const {
					data
				} = response
				this.search.channelsource = data
			});
			if (this.id) {
				this.detail(this.id)
			}
			// this.getList();
		},
		methods: {
			tongbuClick(){
				if(!this.ruleForm.tel){
					return this.$message.error('请输入手机号')
				}
				getTelFindmember({
					'tel': this.ruleForm.tel
				}).then(response => {
					const {
						data
					} = response
					console.log(data)
					this.ruleForm = {
						nickname: data.nickname,
						realname: data.realname,
						sex: Number(data.sex) === 1?1:2,
						tel: data.tel,
						is_lunar: Number(data.is_lunar),
						height: data.height,
						consultant: data.consultant,
						channel: data.channel,
						usercard: data.usercard,
						usercard_type: data.usercard_type,
						career: data.career,
						join_time: data.join_time,
						education: data.education,
						province: data.province,
						city: data.city,
						area: data.area,
						address: data.address,
						residential: data.residential,
						occupation_type: data.occupation_type,
						behavioral: data.behavioral,
						marriage: data.marriage,
						pregnancy: data.pregnancy,
						hobby: data.hobby,
						notes: data.notes,
						birthday: data.birthday ? new Date(data.birthday * 1000) : '',
						id: data.id,
						// 裁剪过后的图片
						headimg: data.headimg
					}
				});
			},
			detail(id) {
				var date = {
					'member_id': id
				}
				MemberDetails(date).then(response => {
					const {
						data
					} = response
					console.log(data)
					this.ruleForm = {
						nickname: data.nickname,
						realname: data.realname,
						sex: Number(data.sex) === 1?1:2,
						tel: data.tel,
						is_lunar: Number(data.is_lunar),
						height: data.height,
						consultant: data.consultant,
						channel: data.channel,
						usercard: data.usercard,
						usercard_type: data.usercard_type,
						career: data.career,
						join_time: data.join_time,
						education: data.education,
						province: data.province,
						city: data.city,
						area: data.area,
						address: data.address,
						residential: data.residential,
						occupation_type: data.occupation_type,
						behavioral: data.behavioral,
						marriage: data.marriage,
						pregnancy: data.pregnancy,
						hobby: data.hobby,
						notes: data.notes,
						birthday: data.birthday ? new Date(data.birthday * 1000) : '',
						id: data.id,
						// 裁剪过后的图片
						headimg: data.headimg
					}
					this.province = [
						data.province, data.city, data.area
					]
					if (data.birthday) {
						this.birthdayChange()
					}
				}).catch(error => {
					console.log(error)
				})
			},
			baocun() {
				getAddEdit(this.ruleForm).then(response => {
					var {
						data
					} = response
					console.log(data)
					this.$router.go(-1)
				});
			},
			birthdayChange() {
				var date = new Date();
				var today_year = date.getFullYear();
				var today_month = date.getMonth();
				var today_day = date.getDate();
				var e = new Date(this.ruleForm.birthday);
				var birth_year = e.getFullYear();
				var birth_month = e.getMonth();
				var birth_day = e.getDate();
				var diff = today_year - birth_year;
				if (today_month < (birth_month - 1)) {
					diff--;
				}
				if (((birth_month - 1) == today_month) && (today_day < birth_day)) {
					diff--;
				}
				this.age = diff === 0 ? 1 : diff
			},
			jietu() {
				var that = this
				this.$refs.cropper.getCropData(data => {
					var file = this.dataURLtoBlob(data, 'chaijian')
					let mf = new FormData()
					mf.append('file', file)
					uploadimg(mf).then(response => {
						that.ruleForm.headimg = response.data
						that.dialogVisible = false
					})
				})
			},
			dataURLtoBlob(dataurl, name) {
				var arr = dataurl.split(","),
					mime = arr[0].match(/:(.*?);/)[1],
					bstr = atob(arr[1]),
					n = bstr.length,
					u8arr = new Uint8Array(n);
				while (n--) {
					u8arr[n] = bstr.charCodeAt(n);
				}
				return new File([u8arr], name, {
					type: mime
				});
			},
			handleAvatarSuccess(file) {
				this.option.img = URL.createObjectURL(file.file)
			},
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
				this.outputType = file.type === 'image/jpeg' ? 'jpeg' : file.type === 'image/png' ? 'png' : ''
				const isLt2M = file.size / 1024 / 1024 < 5
				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG或PNG 格式!')
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 5MB!')
				}
				return isJPG && isLt2M
			},
			handleChange(e) {
				console.log(e)
				console.log(this.province)
				this.ruleForm.province = e[0]
				this.ruleForm.city = e[1]
				this.ruleForm.area = e[2]
			},
			closeCropper() {
				this.dialogVisible = !this.dialogVisible
			},
			back() {
				this.$router.go(-1)
			},
			// getList() {
			//   this.listLoading = true;
			//   fetchList(this.listQuery).then((response) => {
			//     this.list = response.data.items;
			//     this.total = response.data.total;
			//     this.listLoading = false;
			//   });
			// }
			submitUpload() {
				this.$refs.upload.submit()
			},
			handleRemove(file, fileList) {
				console.log(file, fileList)
			},
			handlePreview(file) {
				console.log(file)
			}
		}
	}
</script>

<style scoped>
	.yh_content {
		padding: 20px;
	}

	.contents {
		width: 840px;
		/* border: 1px solid red; */
		margin: 0px auto;
		padding: 10px
	}

	.yh_topsearch {
		border: 1px solid #ccc;
		padding: 20rpx;

	}

	.yh_dis {
		display: flex;
	}

	.yh_disAlc {
		align-items: center;
	}

	.touxiang {
		width: 70px;
		height: 70px;
		border-radius: 10px;
	}

	.thead {
		display: flex;
		align-items: center;
	}

	.small_title {
		font-size: 13px;
		color: #7c7c7c;
		margin-top: 20px;
		margin-bottom: 10px;
	}

	.forms {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.forms_item {
		width: 49.5%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #ededed;
		padding: 5px 5px 5px 10px;
		margin-bottom: 10px
	}

	.left_title {
		letter-spacing: 2px;
		font-size: 14px
	}

	.buttom_btns {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 50%;
		margin: 0px auto;
		margin-top: 50px;
		margin-bottom: 50px
	}

	.save {
		margin-right: 30px
	}

	.tback {
		display: flex;
		justify-content: right;
		width: 90%;
		margin: 0px auto;
	}

	::v-deep .el-input__inner {
		width: 140px;
	}

	.inp {
		width: 310px;
	}

	.inp1 {
		width: 240px;
	}

	.inp2 {
		width: 188px;
	}

	.inp ::v-deep .el-input__inner {
		width: 100%;
	}

	.inp1 ::v-deep .el-input__inner {
		width: 100%;
	}

	.inp2 ::v-deep .el-input__inner {
		width: 100%;
	}

	::v-deep .el-upload-list {
		display: none;
	}

	::v-deep .el-checkbox__input.is-checked+.el-checkbox__label {
		color: #6b7cdd;
	}

	::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,
	.el-checkbox__input.is-indeterminate .el-checkbox__inner {
		border-color: #6b7cdd !important;
		background-color: #6b7cdd !important;
	}

	::v-deep .el-checkbox__input.is-checked+.el-checkbox__label {
		color: #6b7cdd !important;
	}

	::v-deep .el-checkbox__inner:hover {
		border-color: #6b7cdd !important;
	}

	::v-deep .el-checkbox__input.is-focus .el-checkbox__inner {
		border-color: #6b7cdd !important;
	}

	::v-deep .el-radio__input.is-checked+.el-radio__label {
		color: #6b7cdd !important;
	}

	::v-deep .el-radio__input.is-checked .el-radio__inner {
		background: #6b7cdd !important;
		border-color: #6b7cdd !important;
	}
</style>
